<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
    <script th:src="@{/bootstrap-3.3.7-dist/jquery-1.9.1.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script type="text/javascript">
        $(function () {
            //查询
            queryAll();
            $.getJSON("/querySort", function (sortList) {
                $.each(sortList, function (index, p) {
                    var option = "<option value='" + p.id + "'>" + p.name + "</option>";
                    $("select").append(option);
                })
            })

            $("#cha_info").click(function () {
                var sortId = $("select").val();
                //alert(sortId);
                var data = 'sortId=' + sortId;
                queryAll(data);
            })


        })


        //列表
        function queryAll(data) {
            $("#word_info_table").html("");
            //获取表头
            $("#word_info_table").append("<tr><td>商品编号</td><td>商品名称</td><td>商品分类</td><td>产地</td><td>生产日期</td><td>单价</td><td>剩余数量</td><td>操作</td></tr>")
            //获取数据
            $.getJSON("/queryAll", data, function (result) {
                $.each(result, function (index, d) {
                    var sortName="-1";
                    if (d.sortId==1){
                        sortName="玩具";
                    } else if(d.sortId==2){
                        sortName="文具";
                    }else if(d.sortId==3){
                        sortName="电器";
                    }else if(d.sortId==4){
                        sortName="零食";
                    }else if(d.sortId==5){
                        sortName="日用百货";
                    }
                    var tr = "<tr><td>" + d.id + "</td>" +
                        "<td>" + d.name + "</td>" +
                        "<td>" + sortName + "</td>" +
                        "<td>" + d.address + "</td>" +
                        "<td>" + new Date(d.createDate).toLocaleDateString() + "</td>" +
                        "<td>" + d.price + "</td>" +
                        "<td>" + d.remaining + "</td>" +
                        "<td><button type='button' name='bug'>购买</button></td></tr>";
                    $("#word_info_table").append(tr);

                })
            })


        }
    </script>
</head>
<body>
<input type="hidden" th:value="${type}">
<div class="container" align="center">
    <h1>项目查询页面</h1>
    <br/>
    请选择商品类型：
    <select name="sortId">
        <option value="-1">全部</option>
    </select>
    <button type="button" id="cha_info" class="btn btn-success">查询</button>
    <br/>
    <br/>
    <!--Table表格-->
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <table class="table table-hover table-bordered" id="word_info_table"></table>
        </div>
    </div>


</div>
</body>
</html>